<template>
  <div class="page">


    <van-nav-bar
            class="title"
            title="左右商城登录注册"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    />

    <van-form @submit="onSubmit" >
      <div v-show="phoneUp">
        <van-field
                class="title"
                clearable
                v-model="username"
                name="用户名"
                placeholder="请输入用户名/手机号"
                :rules="[{validator,message: '不能为空'}]"
        />
        <van-field
                class="title"
                v-model="password"
                type="password"
                clearable
                name="密码"
                placeholder="请输入密码"
                :rules="[{validator,message: '不能为空'}]"
        />
      </div>




      <div v-show="smsUp">
        <van-field
                class="title"
                clearable
                v-model="phone"
                name="手机号"
                placeholder="请输入手机号"
        />

        <van-field
                v-model="sms"
                center
                clearable
                name="验证码"
                placeholder="请输入短信验证码"
        >
          <template #button style="margin: 16px;">
            <van-button
                    color="red"
                    size="small"
                    :disabled="disabled"
                    @click="sendCode"
                    type="primary">
              {{codeBtnText}}</van-button>
          </template>
        </van-field>
      </div>

      <div style="margin: 16px;">
        <van-button
                class="title"
                size="25"
                color="red"
                round block type="info"
                native-type="submit"
                @click="handleLogin">
          登录
        </van-button>

        <p style="width: 100%">
          <span class="span" v-show="smsremarks" v-on:click="smsLogin">短信验证码登录</span>
          <span class="span" v-show="remarks" v-on:click="phoneLogin">账号密码登录</span>
          <span style="color: white">-----------------</span>
          <span class="span" style="margin-right: 10px" v-on:click="register">手机快速注册</span>
        </p>


      </div>

    </van-form>
    <van-divider style="margin-top: 20%" :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"/>
    <div>
      <van-notice-bar v-show="Notice1" class="yshi"  background="#ecf9ff" left-icon="info-o">
        未注册的手机号验证后将自动创建账号，登录即代表您已同意<a href="">隐私政策</a>
      </van-notice-bar>
      <van-notice-bar v-show="Notice2" class="yshi"  background="#ecf9ff" left-icon="info-o">
        登录即代表您已同意<a href="">隐私政策</a>
      </van-notice-bar>

    </div>
  </div>



</template>

<script>
  // components
  import { Cell, CellGroup, Field, Image } from "vant";
  import axios from "axios";
  export default {
    props: {},
    data() {
      return {
        userId: this.users.userId,
        myself: [],
        Notice2: false,
        Notice1: true,
        disabled: false,
        time: 0,
        codeBtnText: '获取验证码',
        codeSent: false,
        smsremarks: true,
        phone: '',
        remarks: false,
        phoneUp: true,
        smsUp: false,
        username: null,
        password: null,
        sms: null
      };
    },
    computed: {},
    created() {


    },
    mounted() {},
    watch: {},
    methods: {

      register(){
        this.$router.push('/register');
      },
      validator(value){

        if (value != ""){
          return  true;
        }else{
          return  false;
        }
      },


      sendCode(){

        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (this.phone == ""){
          this.$toast("手机号不能为空");
        }else if (!reg.test(this.phone)){
          this.$toast("手机号格式不正确");
        }else{

          this.time = 60;
          this.disabled = true;
          this.timer();

          axios.get('http://localhost:8001/sign/send',{
            params: {
              value: this.phone
            }
          }).then( result => {
            if (result.data.userId == 200){
              this.$toast("短信已发送");
            }else{
              this.$toast("发送失败");
            }
          });
        }
      },
      timer() {
        if (this.time > 0) {
          this.time--;
          this.codeBtnText = this.time + "s后获取";
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.codeBtnText = "获取验证码";
          this.disabled = false;
        }
      },


      /* --- 我是分割线 --- */
      phoneLogin(){
        this.Notice1 = true;
        this.Notice2 = false;
        this.smsUp = false;
        this.phoneUp = true;
        this.smsremarks = true;
        this.remarks = false;
      },
      smsLogin(){
        this.Notice2 = true;
        this.Notice1 = false;
        this.smsUp = true;
        this.phoneUp = false;
        this.smsremarks = false;
        this.remarks = true;
      },
      onClickLeft() {
        this.$router.replace('/index');
      },
      onSubmit(values) {

      },
      handleLogin() {

        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        //可以是纯数字，也可以是纯字母，也可以是数字+字母,6-16 位
        var regix = /^[0-9a-zA-Z]{6,16}$/;

        if (reg.test(this.username)){
          if (regix.test(this.password)){

            let param = new URLSearchParams();
            param.append('value',this.username);
            param.append('pwd',this.password);

            this.$axios({
              method: 'post',
              url: 'http://localhost:8001/sign/poling',
              data: param
            }).then(result => {
              if (result.data.userId != 500){

                this.users.userId = result.data.userId;
                var storage = window.localStorage;
                var a = JSON.stringify(result.data.userName);
                storage.setItem("user",a);
                this.$router.replace('/');
              }else{
                this.$toast(result.data.userName);
              }
            });
          }else{
            this.$toast('您的密码格式有误');
          }
        }else if (reg.test(this.phone)){
          if(/^\d{6}$/.test(this.sms)){

            let param = new URLSearchParams();
            param.append('value',this.phone);
            param.append('sms',this.sms);

            this.$axios({
              method: 'post',
              url: 'http://localhost:8001/sign/inquiry',
              data: param
            }).then( resver => {
              if (resver.data.userId != 500){

                this.users.userId = resver.data.userId;
                var storage = window.localStorage;
                var a = JSON.stringify(resver.data.userName);
                storage.setItem("user",a);
                this.$router.replace('/');

              }else{
                this.$toast('您的手机号或验证码不正确');
              }
            });
          }else{
            this.$toast('验证码为 6 位数字');
          }
        }else{
          this.$toast('您的手机号格式不正确');
        }
      }
    },
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Image.name]: Image
    }
  };
</script>

<style scoped lang="scss">
  .page {
    padding: 10px 15px;
  }

  .title {
    margin-top: 13px;
    margin-bottom: 5px;
  }

  .span{
    font-size: 30px;
    color: #c8c9cc;
  }
  .yshi {
    text-align: center;
    color: #9d9d99;
    font-family: 'iconfont';
    font-size: 18px;
    vertical-align: -5px;
  }
</style>
